<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自主注册</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script src="/static/layui/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<style>
.demo-reg-container{width: 320px; margin: 21px auto 0;}
.demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
  <div class="demo-reg-container">

    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password" value="" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>

    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
    </div>

  </div>
</form>


<script>
layui.use(function(){
  var $ = layui.$;
  var form = layui.form;
  var layer = layui.layer;
  var util = layui.util;

  // 自定义验证规则
  form.verify({
    // 确认密码
    confirmPassword: function(value, item){
      var passwordValue = $('#reg-password').val();
      if(value !== passwordValue){
        return '两次密码输入不一致';
      }
    }
  });

  // 提交事件
  form.on('submit(demo-reg)', function(data){
    var field = data.field; // 获取表单字段值

    // 显示填写结果，仅作演示用
    {#    layer.alert(JSON.stringify(field), {
          title: '当前填写的字段值'
        });
    #}
        // 此处可执行 Ajax 等操作
    // …
    $.ajax({
        url:'/add_user_self_service',
        type:'post',
        data:{
            username:field.username,
            password:field.password
        },
        {#dataType:'json',#}
        success:function (res){
            console.log(res);
            if(res.code === 1){alert(res.msg);

            }
            else if(res.code === 2){alert(res.msg)}
        }
    })
    return false; // 阻止默认 form 跳转
  });
});
</script>
</body>
</html>